<template>
  <!--查看明细-->
	<div id="app">
      <loading v-if="loading"></loading>
		  <div v-else class="my-looklist">
          <div class="my-listtop" v-if="endTime">
              <span :class="{'on':selected == index}" v-for="(item,index) in classify" @click="selectMont(index)">
                  <em  v-text="item.title"></em>
              </span>
          </div>
          <!--明细-->
          <div class="my-listbox" v-if="endTime">
              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loadingMore1" infinite-scroll-distance="10" infinite-scroll-immediate-check="true">
                  <div class="list" v-for="(item,index) in list">
                      <div class="item2">
                          <p class="blod-text" v-text="item.type_title">约呗订单支出</p>
                          <p class="norm-text">{{ (item.creat || item.time) | time("yyyy/MM/dd hh:mm",(item.creat || item.time)) }}</p>                     
                      </div>
                      <!--除余额外的-->
                      <div class="item3" v-if="moneytype != 1">
                          <p class="money-blu" v-text="item.gold" v-if="item.gold < 0">-100</p>
                          <p class="money-blu" v-text="'+'+item.gold" v-if="item.gold >= 0">-100</p>               
                           <p class="norm-text">结余:<span v-text="item.balance">1004</span></p>
                      </div>
                      <!--余额-->
                      <div class="item3" v-if="moneytype == 1">
                          <p class="money-blu" v-text="item.money" v-if="item.money < 0">-100</p>
                          <p class="money-blu" v-text="'+'+item.money" v-if="item.money >= 0">-100</p>               
                           <p class="norm-text">结余:<span v-text="item.balance">1004</span></p>
                      </div>
                  </div>
                  <!--加载中-->
                  <p style="font-size: .26rem;text-align: center;padding: .15rem 0;" v-text="loadText" v-if="manyList.length > 0"></p>
                  <!--缺省图-->
                  <div v-show="list.length <= 0 || !list">
                    <div class="flex" >
                      <img src="../../../assets/img/no-data.png" alt="点击屏幕，重新加载~" class="no-data"/>
                    </div>
                  </div>
              </div>
          </div>
          <!--各种列表-->
          <div class="my-listbox" v-if="!endTime">
              <div v-infinite-scroll="loadmaneyMore" infinite-scroll-disabled="loadingMore2" infinite-scroll-distance="10" infinite-scroll-immediate-check="true">
                  <div class="list" v-for="(item,index) in manyList">
                      <div class="item2">
                          <p class="blod-text" v-text="item.title">约呗订单支出</p>
                          <p class="norm-text">{{ (item.add_time || item.time) | time("yyyy/MM/dd hh:mm",(item.add_time || item.time)) }}</p>                     
                      </div>
                      <!--除余额外的-->
                      <div class="item3">
                          <p class="money-blu" v-text="item.gold || item.money" v-if="(item.gold || item.money) < 0">-100</p>
                          <p class="money-blu" v-text="'+'+(item.gold || item.money)" v-if="(item.gold || item.money) >= 0">-100</p>               
                           <p class="norm-text">结余:<span v-text="item.original_money || item.original_gold">1004</span></p>
                      </div>
                     
                  </div>
              </div>
              <!--加载中-->
              <p style="font-size: .26rem;text-align: center;padding: .15rem 0;" v-text="loadText" v-if="manyList.length > 0"></p>
              <!--缺省图-->
              <div v-show="manyList.length <= 0 || !manyList">
                <div class="flex" >
                  <img src="../../../assets/img/no-data.png" alt="点击屏幕，重新加载~" class="no-data"/>
                </div>
              </div>
          </div>
      </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import Loading from "components/loading.vue"
    import { InfiniteScroll } from 'mint-ui';
export default {
  data() {
    return {
        loadText:'加载中...',
        loading:true,
        moneytype:'',//1=余额，2=钻石，3=魅力值
        status:0,
        startTime:'',
        endTime:'',
        currency:'',
        typeText:'余额列表',
        selected:0,
        classify:[{title:'全部'},{title:'支出'},{title:'收入'}],
        list:[],
        manyList:[],
        moneyText:'钻石',
        loadingMore1:false,
        page:1,
        isAll:false,
        loadingMore2:false,

    }
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate(){
  	

  },  
  //在挂载开始之前被调用
  beforeMount(){
  	
  
  }, 
  components:{Loading},
  //已成功挂载，相当ready()
  mounted(){
      this.selected = 0;
      this.page = 1;
      this.isAll = false;
      this.moneytype = parseInt(common.getQueryString('moneytype'));
      this.way = parseInt(common.getQueryString('way'));
      this.startTime = common.getQueryString('startTime');
      this.endTime = common.getQueryString('endTime');
      if(this.moneytype == 1){
          this.typeText = '余额明细';
          $('title').text('余额明细');
          this.moneyText = '元'
          this.currency = 0;
      }
      if(this.moneytype == 2){
          this.typeText = '音符明细';
          $('title').text('音符明细');
          this.moneyText = '钻石';
          this.currency = 2;
      }
      if(this.moneytype == 3){
          this.typeText = '声贝明细';
          $('title').text('声贝明细');
          this.moneyText = '魅力值';
          this.currency = 3;
      }
      if(this.endTime){
          this.getList();
      }else{
          this.getmanyList();
      }
  },
  //相关操作事件
  methods: {
    //列表加载更多
    loadMore(){
        //加载
        this.loadingMore1 = false;
        setTimeout(()=>{

            if(!this.isAll){
                this.page = this.page+1;
                this.getList();
            }else{
                this.loadingMore1 = true;  
            }
        },100)
    },
    // //各种列表加载更多
    loadmaneyMore(){
        //加载
        this.loadingMore2 = false;
        setTimeout(()=>{

            if(!this.All){
                this.page = this.page+1;
                this.getmanyList();
            }else{

                this.loadingMore2 = true;  
            }
        },100)
    },    
     //选择周月
    selectMont:function(index){
        if(this.selected != index){
            this.selected = index;
            this.page = 1;
            if(index == 0){
                this.status = 0;
            }
            if(index == 1){
                this.status = -1;
            }
            if(index == 2){
                this.status = 1;
            }
            this.getList();
        }
    },
    //列表接口
    getList(){
        var url;
        if(this.moneytype == 1){
            url = "api/user/moneyhistory?";
        }
        if(this.moneytype != 1){
            url = 'api/user/usergoldhistory?currency='+this.currency+'&';
        }

        common.ajax({
            type:'GET',
            url:url+'endTime='+this.endTime+'&startTime='+this.startTime+'&status='+this.status+'&p='+this.page
        }).then(res=>{

            this.loading = false;

            if(this.page ==  1){
                this.list = res.data;
            }else{
                this.list = this.list.concat(res.data);
            }

            if(res.data.length < 10){
                this.isAll = true;
                this.loadText = '没有更多数据了';
            }else{
                this.isAll = false;
                this.loadText = '加载中...';
                this.loadingMore1 = false;
            }
            console.log(res.data.length+';'+this.isAll);
           
        })
    },
    //各种列表
    getmanyList(){
        var url;
        
        //充值记录
        if(this.way == 3){
              url = "api/user/record/recharge?type="+this.moneytype;
        }else{

            //提现或者转换钻石
            //余额
            if(this.moneytype == 1){
                url = "api/user/record/money?type="+this.way;
            }
            //魅力
            if(this.moneytype == 3){
                url = "api/user/record/charm?type="+this.way;
            }
        }

        common.ajax({
            type:'GET',
            url:url+'&p='+this.page
        }).then(res=>{

            this.loading = false;
            if(this.page ==  1){
                this.manyList = res.data;
            }else{
                this.manyList = this.manyList.concat(res.data);
            }
            
            if(res.data.length < 10){
                this.isAll = true;
                 this.loadText = '没有更多数据了';
            }else{
                this.isAll = false;
                this.loadText = '加载中...';
                this.loadingMore2 = false;
            }  
                      
        })

    },
  }
}
</script>

